<template>
  <div @click="goEditor">
    <div class="subimt-content" v-if="isToken" v-loading="loading">
      <div class="submit-talk">
        <div class="submit-icon">
          <img src="../assets/imgs/lbiaoqian.png" />
        </div>
        <div class="submit-title submitTag">选择专题</div>
        <div class="selModule">
          <div
            class="singleModule"
            v-for="(item, index) in module"
            :key="index"
          >
            <input
              type="radio"
              name="module"
              id=""
              class="radioStyle"
              :value="item.tagId"
              v-model="interestId"
              @change="getModule(item.tagId)"
            />
            <label for="">{{ item.tagName }}</label>
          </div>
        </div>
      </div>
      <div class="submit-talk" @click="selTalk">
        <div class="submit-icon talkIcon">
          <img src="../assets/imgs/bq.png" />
        </div>
        <div class="submit-title ">{{ talk }}</div>
      </div>
      <div class="submit-stars">
        <div class="stars-title">【来闻指数】</div>
        <div class="stars" v-for="(item, index) in stars" :key="index">
          <div @click="getStars(index)">
            <img src="../assets/imgs/beizi.png" v-if="item.show" />
            <img src="../assets/imgs/hb.png" v-else />
          </div>
        </div>
        <div class="starText" v-if="starsShow">{{ prompt }}</div>
        <div class="starText" v-else-if="starsNum == 4">
          <img src="../assets/imgs/five.png" alt="" />
        </div>
      </div>
      <input
        type="text"
        placeholder="请输入标题"
        class="ipt-title"
        v-model="title"
      />
      <textarea
        class="subText"
        name=""
        id=""
        cols="30"
        rows="10"
        placeholder="请输入正文..."
        v-model="content"
      ></textarea>
      <!-- <Contenteditable v-model="content" @input="getContent"></Contenteditable> -->
      <!-- <div
        class="subText"
        contenteditable="true"
        placeholder="请输入正文..."
        id="subText"
        @input="content=$event.target.innerText"
        v-text="content"
      ></div> -->
      <div class="submit-btnGroup">
        <div class="submit-tag" @click="showModal()">
          <div class="submit-btn">
            <img src="../assets/imgs/tp.png" alt="" />
          </div>
          <div class="btn-text">添加图片</div>
        </div>

        <div class="submit-tag" @click="saveDrafts(1)">
          <div class="submit-btn btnSave">
            <img src="../assets/imgs/cg.png" alt="" />
          </div>
          <div class="btn-text">草稿箱</div>
        </div>
        <div class="submit-button" @click="submit(0)">发布</div>
      </div>
      <div class="up-modal" v-if="show">
        <div class="modal-top">
          <div class="modal-title">本地上传</div>
          <div class="modal-clear" @click="showModal()">
            <img src="../assets/imgs/shanchu.png" alt="" />
          </div>
        </div>
        <div class="modal-prompt">
          共{{ totalNum }}张，还能上传{{ number }}张
        </div>
        <div class="modal-pic">
          <div class="add-pic" @change="addImg($event)">
            <input
              type="file"
              class="addFile"
              ref="file"
              accept="image/*"
              multiple
            />
            <img src="../assets/imgs/addPic.png" alt="" />
          </div>
          <div class="pic-single" v-for="(item, index) in pics" :key="index">
            <img :src="item" alt="" />
            <div class="deleteImg" @click="deleteImg(index)">
              <img src="../assets/imgs/delete.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <Talk @sendTalk="getTalk" ref="talk"></Talk>
  </div>
</template>

<script>
import Talk from "../components/Talk";
import Contenteditable from "../components/Contenteditable";
export default {
  name: "submit",
  data() {
    return {
      stars: [{}, {}, {}, {}, {}],
      pics: [],
      show: false,
      number: 9,
      totalNum: 0,
      title: "",
      starsShow: false,
      article: {},
      starsNum: "",
      module: null,
      interestId:0,
      talk: "选择话题",
      content: "",
      loading: false,
      articleId: null,
      newNum: 1,
      isToken: false,
    };
  },
  components: {
    Talk,
    Contenteditable,
  },
  mounted() {
    this.getRem(1920, 100);
    if (this.$route.query.id) {
      //  加载草稿箱
      this.articleId = this.$route.query.id;
      this.loadDrafts();
    }
  },
  created() {
    if (localStorage.getItem("token")) {
      this.isToken = true;
      this.init();
    } else {
      this.isToken = false;
    }
    //初始化加载星星
    for (let i of this.stars.keys()) {
      this.$set(this.stars[i], "show", true);
    }
  },
  methods: {
    //主函数
    init() {
      //获取用户信息
      let user = JSON.parse(localStorage.getItem("user"));
      this.$set(this.article, "headImage", user.headImage);
      this.$set(this.article, "nickName", user.nickName);
      this.$set(this.article, "articleUserId", user.id);
      //模块列表
      this.$fetch(`/laiwen/interest/frontend/list`, {}).then((res) => {
        this.module = res.interestList;
      });
    },
    //初始化所有状态
    initStatus() {
      this.pics = [];
      this.number = 0;
      this.totalNum = 0;
      this.title = "";
      this.starsShow = false;
      this.article = {};
      this.starsNum = "";
      this.module = null;
      this.interestId = "";
      this.talk = "选择话题";
      this.content = "";
      this.show = false;
      this.stars = [];
      console.log(this.content);
    },
    // 星星方法(从0开始算)
    getStars(e) {
      //索引加一
      this.starsNum = e;
      for (let i of this.stars.keys()) {
        this.$set(this.stars[i], "show", true);
      }
      //根据索引值点亮星星
      for (let i = 0; i <= e; i++) {
        this.$set(this.stars[i], "show", false);
      }
      console.log(`星星颗数${this.starsNum + 1}`);
      //根据星星展示提示文字
      console.log(e);
      switch (e) {
        case 0:
          this.prompt = "很不香";
          this.starsShow = true;
          break;
        case 1:
          this.prompt = "不太香";
          this.starsShow = true;
          break;
        case 2:
          this.prompt = "一般香";
          this.starsShow = true;
          break;
        case 3:
          this.prompt = "非常香";
          this.starsShow = true;
          break;
        case 4:
          this.prompt = "真香警告";
          this.starsShow = false;
          break;
      }
    },
    // 获取内容
    getContent(e) {
      this.content = e;
    },
    //选择模块
    getModule(id) {
      this.interestId = id;
      console.log(this.interestId);
    },
    // 点击出现模态框
    showModal() {
      this.show = !this.show;
    },
    //获取话题模态窗
    selTalk() {
      this.$refs.talk.clear();
    },
    // 添加图片
    addImg(e) {
      let fileLen = e.target.files.length;
      for (let i = 0; i < fileLen; i++) {
        let file = e.target.files[i];
        console.log(file);
        let reader = new FileReader();
        let url = "";
        reader.readAsDataURL(file);
        reader.onload = (e) => {
          if (this.number > i) {
            url = e.target.result;
            //上传到服务器
            let serverUrl = null;
            this.$post(`/laiwen/upload/file/baseimage`, url).then((res) => {
              serverUrl = res.downUrl;
              this.pics.push(serverUrl);
              this.number -= 1;
              this.totalNum += 1;
            });
          } else {
            if (i == fileLen - 1) {
              this.$message.warning("只能上传9张图片");
            }
          }
        };
      }
    },
    //删除图片
    deleteImg(e) {
      this.pics.splice(e, 1);
      this.number += 1;
      this.totalNum -= 1;
    },
    //发布文章
    submit(state) {
      if (this.title == "" || this.interestId == "" || this.content == "") {
        this.$message.warning("标题,内容和专题不能为空");
        return false;
      }
      this.$set(this.article, "articleState", state);
      this.$set(this.article, "talk", this.talk);
      this.$set(this.article, "articleInterestId", this.interestId);
      this.$set(this.article, "articleHtml", null);
      this.$set(this.article, "articleContent", this.content);
      this.$set(this.article, "articleTitle", this.title);
      this.$set(this.article, "award", this.starsNum);
      let pic = this.pics.join(",");
      this.$set(this.article, "articlePicture", pic);
      //当talk为选择话题=null
      if (this.article.talk === "选择话题") {
        this.article.talk = null;
      }
      this.loading = true;
      // 从草稿箱中发布文章的判断操作
      if (
        this.article.articleTitle != null &&
        this.article.articleTitle != null &&
        this.article.articleInterestId
      ) {
        this.$post(`/laiwen/article/frontend/publish`, this.article).then(
          (res) => {
            console.log(this.article);
            if (res.msg == "发布成功") {
              this.loading = false;
              this.initStatus();
              this.$parent.getList();
            } else {
              this.$message.error("发布文章失败请联系管理员");
            }
          }
        );
      } else {
        this.loading = false;
        this.$message.error("亲亲请先输入内容和标题还有模块哦");
      }
    },
    //存草稿
    saveDrafts(state) {
      if (this.title == "" || this.content == "") {
        this.$message.warning("标题,内容不能为空");
        return false;
      }
      this.$confirm("是否存入草稿箱?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$set(this.article, "articleState", state);
          this.$set(this.article, "talk", this.talk);
          this.$set(this.article, "articleInterestId", this.interestId);
          this.$set(this.article, "articleHtml", null);
          this.$set(this.article, "articleContent", this.content);
          this.$set(this.article, "articleTitle", this.title);
          this.$set(this.article, "award", this.starsNum);
          let pic = this.pics.join(",");
          this.$set(this.article, "articlePicture", pic);
          this.$post(`/laiwen/article/frontend/publish`, this.article).then(
            (res) => {
              console.log(res);
              console.log(this.article);
              if (res.msg == "发布成功") {
                this.loading = false;
                this.$router.push({
                  path: "/drafts",
                });
              } else {
                this.$message.error("存储草稿失败请联系管理员");
              }
            }
          );
        })
        .catch(() => {
          that.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    //加载草稿箱的内容
    loadDrafts() {
      this.$post(`/laiwen/article/frontend/info/${this.articleId}`, {}).then(
        (res) => {
          this.article = res.article;
          this.pics = res.article.articlePicture.split(",");
          this.totalNum = this.pics.length;
          this.number = 9 - this.totalNum;
          this.title = this.article.articleTitle;
          this.interestId = this.article.articleInterestId;
          this.talk = this.article.talk;
          this.content = this.article.articleContent;
          if (this.talk == null) {
            this.talk = "选择话题";
          }
          if (this.article.award) {
            this.draftsStar(this.article.award);
          }
        }
      );
    },
    //草稿箱特有星星方法
    draftsStar: function(num) {
      this.getStars(num);
    },
    getTalk() {
      this.talk = this.$refs.talk.content;
    },
    goLogin() {
      this.$router.push("/login");
    },
    goEditor() {
      this.$router.push({
        path: "/editor",
      });
    },
  },
};
</script>

<style scoped>
.subimt-content {
  width: 11.02rem;
  min-height: 2.66rem;
  /* padding-left: 0.2rem; */
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 0.05rem;
  position: relative;
}
.subimt-content .submit-talk {
  width: 100%;
  height: 0.52rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding-left: 0.2rem;
  box-sizing: border-box;
  border-bottom: 0.01rem solid #f4f4f4;
}
.submit-btn {
  width: 0.24rem;
  height: 0.2rem;
  opacity: 1;
}
.btnSave {
  width: 0.19rem;
  height: 0.2rem;
  opacity: 1;
}
.subimt-content .submit-title {
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(9, 9, 9, 1);
  margin-left: 0.09rem;
  opacity: 1;
}
image {
  width: 100%;
  height: 100%;
}
.subimt-content .submit-stars {
  width: 100%;
  height: 0.36rem;
  display: flex;
  align-items: center;
  font-size: 0.16rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(9, 9, 9, 1);
  opacity: 1;
  margin-right: 0.12rem;
}
.subimt-content .submit-stars .stars {
  width: 0.17rem;
  height: 0.2rem;
  margin-right: 0.16rem;
  cursor: pointer;
}
.subimt-content .submit-stars .stars-title {
  height: 0.22rem;
  font-size: 0.16rem;
  margin-left: 0.1rem;
  font-family: PingFang SC;
  color: rgba(9, 9, 9, 1);
  opacity: 1;
  margin-right: 0.12rem;
}
.ipt-title {
  width: 100%;
  height: 0.45rem;
  display: flex;
  font-size: 0.15rem;
  align-items: center;

  border-bottom: 0.01rem solid #f4f4f4 !important;
  border: none;
  outline: none;
  padding-left: 0.2rem;
  box-sizing: border-box;
}
.ipt-title::-webkit-input-placeholder {
  width: 0.75rem;
  height: 0.21rem;
  font-size: 0.15rem;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.21rem;
  color: rgba(153, 153, 153, 1);
  opacity: 1;
}
.subText::placeholder {
  font-size: 0.14rem;
  opacity: 1;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
}
.subText {
  width: 100%;
  min-height: 0.84rem;
  max-height: 4.2rem;
  padding-top: 0.12rem;
  padding-bottom: 0.12rem;
  word-wrap: break-word;
  border: none;
  padding-left: 0.2rem;
  outline: none;
  border-bottom: 0.01rem solid #f4f4f4 !important;
  font-size: 0.14rem;
  appearance: none;
  outline: none;
  line-height: normal;
  font-family: PingFang SC;
  resize: none;
  box-sizing: border-box;
}

.subimt-content .submit-btnGroup {
  width: 100%;
  height: 0.48rem;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  border-radius: 0.05rem;
  display: flex;
  align-items: center;
  padding-left: 0.2rem;
  box-sizing: border-box;
}
.submit-btnGroup .submit-tag {
  height: 0.22rem;
  margin-right: 0.2rem;
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(40, 40, 40, 1);
  display: flex;
  opacity: 1;
}
.btn-text {
  line-height: 0.22rem;
  margin-left: 0.08rem;
  cursor: pointer;
}
.submit-button {
  width: 0.8rem;
  height: 0.36rem;
  background: rgba(255, 227, 0, 1);
  opacity: 1;
  border-radius: 0.05rem;
  font-size: 0.16rem;
  line-height: 0.36rem;
  font-family: PingFang SC;
  font-weight: 400;
  text-align: center;
  color: rgba(40, 40, 40, 1);
  position: absolute;
  right: 0.2rem;
  opacity: 1;
  cursor: pointer;
}
.up-modal {
  max-width: 3.04rem;
  min-height: 2.05rem;
  /* max-height: 3.81rem; */
  background: rgba(255, 255, 255, 1);
  box-shadow: 0rem 0.01rem 0.03rem rgba(0, 0, 0, 0.16);
  opacity: 1;
  box-sizing: border-box;
  padding: 0.16rem 0.2rem 0.24rem 0.2rem;
  border-radius: 0.05rem;
  margin-top: 0.04rem;
}
.up-modal .modal-top {
  width: 100%;
  height: 0.21rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.28rem;
}
.up-modal .modal-top .modal-title {
  height: 0.21rem;
  font-size: 0.15rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(40, 40, 40, 1);
  opacity: 1;
}
.up-modal .modal-top .modal-clear {
  width: 0.11rem;
  height: 0.11rem;
  opacity: 1;
  cursor: pointer;
}
.modal-pic {
  width: 2.68rem;
  /* height: 2.58rem; */
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.modal-prompt {
  height: 0.18rem;
  font-size: 0.13rem;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.18rem;
  color: rgba(153, 153, 153, 1);
  opacity: 1;
  margin-bottom: 0.18rem;
}
img {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}
.submit-icon {
  width: 0.2rem;
  height: 0.16rem;
  display: flex;
  cursor: pointer;
  align-items: center;
}
.add-pic {
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.08rem;
  margin-bottom: 0.08rem;
  cursor: pointer;
}
.pic-single {
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.08rem;
  margin-bottom: 0.08rem;
  position: relative;
}
.pic-single img {
  object-fit: cover !important;
}
.pic-single:nth-of-type(3n) {
  margin-right: 0rem;
}
.addFile {
  width: 0.8rem;
  height: 0.8rem;
  border: 1px solid red;
  position: absolute;
  top: 0;
  opacity: 0;
  cursor: pointer;
}
.deleteImg {
  width: 0.08rem;
  height: 0.08rem;
  opacity: 1;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0.01rem;
}
.starText {
  width: 0.92rem;
  height: 0.33rem;
  background: rgba(255, 248, 226, 1);
  opacity: 1;
  border-radius: 0.4rem;
  font-size: 0.16rem;
  font-family: PingFang SC;
  font-weight: 400;
  text-align: center;
  line-height: 0.33rem;
  color: rgba(255, 146, 0, 1);
  margin-left: 0.2rem;
}
img {
  width: 100%;
  height: 100%;
  display: block;
}
.submit-icon {
  width: 0.14rem;
  height: 0.21rem;
}
.submitTag {
  margin-left: 0.14rem !important;
}
.selModule {
  /* width: 100%; */
  height: 100%;
  display: flex;
  margin-left: 0.81rem;
}
.selModule .singleModule {
  /* width: 0.49rem; */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(34, 34, 34, 1);
  margin-right: 0.39rem;
}
.singleModule label {
    margin-left: 0.05rem;
}
/* .singleModule:nth-of-type(5) { */
  /* width: 0.55rem; */
/* } */
.radioStyle {
  width: 0.13rem;
  height: 0.13rem;
  background: rgba(255, 255, 255, 1);
  border: 0.01rem solid rgba(112, 112, 112, 1);
  border-radius: 50%;
  opacity: 1;
  appearance: none;
  cursor: pointer;
}

input[type="radio"]:checked {
  background-color: #707070;
  background-clip: content-box;
  padding: 0.01rem;
  outline: none;
}
input[type="radio"] {
  margin: 0 !important;
}
.talkIcon {
  width: 0.2rem !important;
  height: 0.16rem !important;
}
.isUser {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
</style>
